<template>
  <div class="data-analy-box">
    <div style="padding: 5px" class="user-table" v-if="filterAdd.length > 0">
      <!-- <img
        src="/img/left-menu/filter.png"
        alt=""
        class="test-icon test-icon-img"
        @click.stop="showFilterBox"
        title="表格筛选"

      >
      <i
        class="el-icon-setting test-icon"
        @click.stop="showFilterDialog"
        title="表格属性列设置"
      ></i> -->
      <AkTable
        :tableLoding="tableLoding"
        :sortAttr="filterSortObj"
        :tableData="filterList"
        :labelObj="filterLabel"
        :addList="filterAdd"
        ref="AkTable"
        :checkedIdAttr="'id'"
        :checkedId="userLineId"
        :agencyAttrList="['name']"
        @changeSort="changeSortType"
        @changeCId="changeCId"
      >
      </AkTable>

      <div class="pagination-container">
        <el-pagination
          :hide-on-single-page="true"
          :disabled="tableLoding"
          background
          small
          layout="prev, pager, next"
          :total="filterTotal"
          :page-size="filterPageSize"
          :current-page="filterPageNum"
          align="right"
          :pager-count="5"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import AkTable from '@/components/gisPageComponents/table'
import { getSendCardOnline } from '@/apis/gis'
export default {
  components: { AkTable },
  data() {
    return {
      filterLabel: {
        //表头label
        name: '省份',
        mobileNum: '移动',
        unincomNum: '联通',
        telecomNum: '电信'
      },
      filterList: [], //列表数据
      filterAdd: ['name', 'mobileNum', 'unincomNum', 'telecomNum'], //页面表头
      filterSortObj: {
        //需要排序的字段
        unincomNum: 'custom',
        telecomNum: 'custom',
        mobileNum: 'custom'
      },
      sortType: 1,
      sortStr: 'mobileNum',
      // 分页数据
      filterPageSize: 10, // 每个页面展示多少数量
      tableLoding: false,
      filterTotal: 0,
      filterPageNum: 1
    }
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    // console.log(this.form, 'teset2')
    this.reset()
  },
  watch: {
    'form.ptMonth': {
      handler(val) {
        // this.reset()
        // console.log(val, 'test')
        this.getList(val)
      },
      immediate: true
    }
  },
  methods: {
    userLineId(id) {
      this.$emit('checkedId', id)
    },
    reset() {
      this.filterPageNum = 1
      this.sortType = 1
      window.console.log(this.$refs, 'refs')
      if (this.$refs.AkTable) {
        this.$refs.AkTable.$refs.elTable.clearSort()
      }
      this.sortStr = 'mobileNum'
    },
    getList(val) {
      let data = {
        ptMonth: val || this.form.ptMonth,
        pageSize: this.filterPageSize,
        pageNum: this.filterPageNum,
        sortType: this.sortType,
        sortStr: this.sortStr
      }
      this.tableLoding = true
      getSendCardOnline(data)
        .then(res => {
          if (res.code == 1) {
            this.filterList = res.data.list || []
            this.filterTotal = res.data.total
            this.tableLoding = false
          }
        })
        .catch(() => {
          this.tableLoding = false
        })
    },
    // 更改sort
    changeSortType(e) {
      console.log(e)
      this.sortStr = e.sortStr
      this.sortType = e.sortType
      this.getList()
    },
    changeCId(e, type) {},
    changePage(data) {
      this.filterPageNum = data
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.data-analy-box {
  .test-icon {
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 30px;
    font-size: 17px;
    color: #fff;
    z-index: 2;
  }
  .test-icon-img {
    width: 17px;
    height: 17px;
    right: 54px;
  }
  .download-icon-img {
    width: 18px;
    height: 18px;
    // right: 73px;
  }
}
</style>
